import { memo } from 'react'
import type { FC, ReactNode } from 'react'

interface IProps {
  children?: ReactNode
  title?: string
  titleAfter?: string
  suffix?: string
  className?: string
  onClickSuffix?: ()=>void
}

const Container: FC<IProps> = (props) => {
  const { title, suffix, titleAfter, className } = props
  const classList = className? `relative ${className}` : 'relative'
  return (
    <div className={'container px-4 mx-auto mb-4'}>
      <div className={"flex justify-between items-center mb-2 select-none"}>
        <div>
          {title&&<span className={'text-gray-800 text-lg mr-2'}>{title}</span>}
          {titleAfter&&<span className={'text-xs text-gray-500'}>{titleAfter}</span>}
        </div>
        <span onClick={()=>props.onClickSuffix} className={'text-xs mr-2 text-primary-600 cursor-pointer'}>{suffix?suffix:"查看全部 ▶"}</span>
      </div>
      <div className={classList}>
        {props.children}
      </div>
    </div>
    )
}

export default memo(Container)
